<template>
	<view :style="skin" class="content personal">
		<view class="mainInput" v-if="pageIndex == 1">
			<fui-input :label="$t('login.surname')" v-model="userObj.customerXing" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<fui-input :label="$t('login.givenName')" v-model="userObj.customerMing" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<fui-input :label="$t('login.alias')" v-model="userObj.nickname" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>


			<u-cell @click="genderShow = true" :title="$t('login.gender')" :border="false"
				:value="userObj.gender == '1'?$t('login.male'):$t('login.female')" :isLink="true"
				arrow-direction="right"></u-cell>
			<view class="cellLine" />
			<u-cell @click="dateShow = true" :title="$t('login.birth')" :value="userObj.customerBirth" :border="false"
				:isLink="true" arrow-direction="right"></u-cell>
			<view class="cellLine" />

			<fui-input :label="$t('login.idNumber')" v-model="userObj.customerIdNumber" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<u-cell @click="houseShow = true" :title="$t('login.housing')"
				:value="userObj.customerHouse == 1?$t('login.rented'):$t('login.owned')" :border="false" :isLink="true"
				arrow-direction="right"></u-cell>
			<view class="cellLine" />
			<u-cell @click="carShow = true" :title="$t('login.isMoto')" :border="false"
				:value="userObj.hasCar == 1?$t('login.yes'):$t('login.no')" :isLink="true" arrow-direction="right"></u-cell>
			<view class="cellLine" />


		</view>

		<view class="mainInput" v-if="pageIndex == 2">
			<fui-input :label="$t('login.agentID')"  :disabled="userObj.regRole == 0"  v-model="agentAccount" @blur="getAgentName" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<fui-input :label="$t('login.agentName')"  v-model="userObj.agentName" textAlign="right" disabled></fui-input>
			<fui-input :label="$t('login.guarantor')" v-model="userObj.guarantorName" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<fui-input :label="$t('login.guarantorID')" v-model="userObj.guarantorId" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<fui-input :label="$t('login.guarantorPhone')" v-model="userObj.guarantorPhone" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>
			<fui-input :label="$t('login.guarantorAdd')" v-model="userObj.guarantorAddress" textAlign="right"
				:placeholder="$t('lease.pleEnter')"></fui-input>

		</view>

		<view class="mainInput" v-if="pageIndex == 3">
			<u-cell-group>
				<!-- <u-cell title="国家地区" :value="userObj.customerNation" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="地址大区" :value="userObj.customerRegion" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="客户区" :value="userObj.customerDistrict" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="客户县" :value="userObj.customerCounty" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="客户乡镇" :value="userObj.customerSubCounty" :isLink="true" arrow-direction="right"></u-cell> -->


				<fui-input :label="$t('login.country')" v-model="userObj.customerNation" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
				<fui-input :label="$t('login.addressDistrict')" v-model="userObj.customerRegion" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
				<fui-input :label="$t('login.Area')" v-model="userObj.customerDistrict" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
				<fui-input :label="$t('login.County')" v-model="userObj.customerCounty" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
				<fui-input :label="$t('login.Township')" v-model="userObj.customerSubCounty" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>

				<fui-input :label="$t('login.Parish')" v-model="userObj.customerParish" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>

				<fui-input :label="$t('login.detailedAddress')" v-model="userObj.customerDetailAddress" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
				<fui-input :label="$t('login.HospitalSchool')" v-model="userObj.nearSchHos" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
				<!-- <u-cell title="GPS位置" :value="userObj.gpsLocation" :isLink="true" arrow-direction="right"></u-cell> -->
				<!-- <fui-input :label="$t('login.GPSLocation')" v-model="userObj.gpsLocation" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input> -->

				<u-cell @click="GPSLocation" :title="$t('login.GPSLocation')" :value="GPSLocationNum" :isLink="true"
					arrow-direction="right"></u-cell>

				<fui-input :label="$t('login.ShopAddress')" v-model="userObj.shopAddress" textAlign="right"
					:placeholder="$t('lease.pleEnter')"></fui-input>
			</u-cell-group>

		</view>

		<view class="mySheet">
			<u-action-sheet :closeOnClickOverlay="true" @close="houseShow = false" :actions="actionList" @select="houseSelect"
				:show="houseShow"></u-action-sheet>


			<u-action-sheet :closeOnClickOverlay="true" @close="genderShow = false" :actions="genderList"
				@select="genderSelect" :show="genderShow"></u-action-sheet>

			<u-action-sheet :closeOnClickOverlay="true" @close="carShow = false" :actions="carList" @select="carSelect"
				:show="carShow"></u-action-sheet>
		</view>

		<view class="btnModule">
			<u-button color="var(--subjectColor)" @click="handleNext">{{$t('login.nextPage')}}
			</u-button>
			<fui-safe-area></fui-safe-area>
		</view>

		<!-- 日期 -->
		<fui-date-picker :value="maxDate" minDate='1900-01-01' :maxDate="maxDate" :show="dateShow" type="3" @change="change"
			@cancel="cancel"></fui-date-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		resGms
	} from '@/api/login.js'
import { user } from '../../../utils/sql/sqlUser';
	export default {
		data() {
			return {
				agentAccount:'',
				GPSLocationNum:'',
				dailiName: '',
				pageIndex: 1,
				houseShow: false,
				genderShow: false,
				carShow: false,
				dateShow: false,
				actionList: [{
						name: '自建住房',
						value: 0
					},
					{
						name: '租房',
						value: 1
					},
				],
				genderList: [{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2,
					}
				],
				carList: [{
						name: '无',
						value: 0,
					},
					{
						name: '有',
						value: 1,
					}
				],


				userObj: {

					"regRole": "0",
					"password": "",
					"checkPassword": "",
					"phone": "",
					"areaCode": "",
					"avatar": "",
					"nickname": "",
					"gender": '1',
					"customerXing": "",
					"customerMing": "",
					"customerBirth": "",
					"customerIdNumber": "",
					"agentAccount": "",
					"agentName": "",
					"guarantorName": "",
					"guarantorId": "",
					"guarantorPhone": "",
					"guarantorAddress": "",
					"customerHouse": "1",
					"hasCar": "1",
					"customerNation": "",
					"customerRegion": "",
					"customerDistrict": "",
					"customerCounty": "",
					"customerSubCounty": "",
					"customerParish": "",
					"customerDetailAddress": "",
					"nearSchHos": "",
					"gpsLocation": "",
					"shopAddress": "",
					"customerIdPhoto": "",
					"contractBookletPhoto": "",

				},
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		onShow() {

		},
		onLoad(e) {
			let that = this
			
			let userObj = uni.getStorageSync('userObj')
			console.log(userObj, 'this.userObj');
			this.pageIndex = 1
			if (userObj) {
				this.userObj = userObj
				this.GPSLocationNum = userObj.gpsLocation
			}
			this.actionList = [{
					name: this.$t('login.owned'),
					value: 0
				},
				{
					name: this.$t('login.rented'),
					value: 1
				},
			]
			this.genderList = [{
					name: this.$t('login.male'),
					value: 1
				},
				{
					name: this.$t('login.female'),
					value: 2
				},
			]

			this.carList = [{
					name: this.$t('login.no'),
					value: 0
				},
				{
					name: this.$t('login.yes'),
					value: 1
				},
			]
			uni.setNavigationBarTitle({
				title: that.$t('login.information'),
			});

			this.getMaxDate()
			console.log(e);
			this.userObj.phone = e.phone
			this.userObj.areaCode = e.areaCode
			this.userObj.password = e.password
			this.userObj.checkPassword = e.password
			this.userObj.regRole = e.regRole
			if(e.regRole == 0){
				let loginInfo = JSON.parse(uni.getStorageSync('loginInfo'));
				this.agentAccount = loginInfo.customerAccount
				console.log(this.userObj.agentAccount);
				this.getAgentName()
			}
			
			uni.$on('getGPSInfo',function(e){
				console.log(e[0].action.address);
				that.userObj.gpsLocation = e[0].action.address
				that.GPSLocationNum = e[0].action.address
				console.log(that.userObj);
			})
			
			
			
		},
		methods: {
			getAgentName() {
				resGms({
					account: this.agentAccount
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.userObj.agentName = res.data.username
						this.userObj.agentAccount = this.agentAccount
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getMaxDate() {

				//获取当前年月日
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth() + 1; //得到月份
				var date = now.getDate(); //得到日期
				this.maxDate = year + "-" + month + "-" + date;
			},
			genderSelect(item) {
				this.userObj.gender = item.value
			},
			carSelect(item) {
				console.log(item);
				this.userObj.hasCar = item.value
			},
			houseSelect(item) {
				console.log(item);
				this.userObj.customerHouse = item.value
			},
			GPSLocation() {
				uni.navigateTo({
					url:'/pages/login/googleMap/googleMap?type=3'
				})
			},
			handleNext() {

				if (this.pageIndex == 3) {
					
					if (this.userObj.customerNation == '' || this.userObj.customerRegion == '' || this.userObj.customerDistrict == '' || this
						.userObj.customerCounty == '' || this.userObj.customerSubCounty == '' || this.userObj.customerParish == '' || this.userObj.customerDetailAddress == '' || this.userObj.nearSchHos == ''|| this.userObj.gpsLocation == ''|| this.userObj.shopAddress == '' ) {
						uni.$u.toast('Parameter null');
						
						return false
					}
					
					console.log(this.userObj);
					uni.setStorageSync('userObj', this.userObj)
					uni.navigateTo({
						url: '/pages/login/registerHeadImg/registerHeadImg'
					})
				} else {
					if (this.pageIndex == 1) {
						if (this.userObj.customerXing == '' || this.userObj.customerMing == '' || this.userObj.nickname == '' || this
							.userObj.customerBirth == '' || this.userObj.customerIdNumber == '') {
							uni.$u.toast('Parameter null')
							return false
						}
						
					} else if (this.pageIndex == 2) {
						console.log(this.userObj);
						if ( this.userObj.guarantorName == '' || this
							.userObj.guarantorId == '' || this.userObj.guarantorPhone == '' || this.userObj.guarantorAddress == '' ) {
							uni.$u.toast('Parameter null')
							return false
						}
						
						
					}
					uni.setStorageSync('userObj', this.userObj)
					this.pageIndex++
				}
			},
			change(e) {
				this.dateShow = false

				this.userObj.customerBirth = `${e.year}Year${e.month}Month${e.day}Day`
			},
			cancel() {
				this.dateShow = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	.personal {
		padding: 16px;
		box-sizing: border-box;

		.mainInput {
			border: 1px solid #ccc;
			width: 100%;
			height: calc(100% - 100px);
			background-color: #fff;

			/deep/.u-cell__value {
				width: 150px;
			}

			/deep/.u-cell__body {
				padding: 13px 15px;
			}

			.cellLine {
				width: calc(100% - 32px);
				margin: 0 auto;
				// border-bottom: 0.5px solid #eeeeee;
				height: 0.5px;
				background-color: #eee;
			}
		}

		.btnModule {
			width: calc(100% - 32px);
			height: 44px;
			box-sizing: border-box;
			margin-top: 16px;
			position: fixed;
			bottom: 16px;
		}
	}
</style>